<template>
  <div class="comment-container" @click="hideemotion">
<!-- 第一张卡片 -->
    <el-card class="one-card" shadow="hover">
      <div class="header">
        <i class="el-icon-chat-dot-round"></i>
        <span>留言板</span>
      </div>
      <div class="middle">
        有什么想说的，欢迎小伙伴们在下面文明留言哦！！！
      </div>
      <div class="bottom">
        <img src="https://cdn.jsdelivr.net/gh/topking66/topking_imgs/images/pika4.gif" alt="">
      </div>
    </el-card>
<!--  第二张卡片 -->
    <el-card class="two-card" shadow="hover">
<!--    评论头 + 图片  -->
      <div class="two-header">
        <div>
          <i class="el-icon-chat-dot-round"></i>
          <span>评论</span>
        </div>
        <img src="../assets/images/comment_bg.png" alt="">
      </div>
<!--    评论文本框  -->
      <div class="comment-box">
        <div v-if="commentBox">
          <el-input
              type="textarea"
              placeholder="你想说些什么"
              v-model="textarea"
              maxlength="100"
              rows="3"
              show-word-limit
              class="comment"
          >
          </el-input>
          <!--      表情控制按钮和评论按钮   -->
          <div class="showComment">
            <img  @click.stop="showemotion" src="../assets/images/emotion.png" alt="">
            <el-button size="small" @click="addComment" class="comment-btn" type="primary">发表</el-button>
          </div>
          <!--     一百多个表情   -->
          <div @click.stop class="emotion" v-show="showEmotion" >
            <img  @click="changetext(index)" v-for="(item,index) in emotion" :key="index" :src="item" alt="">
          </div>
        </div>
<!-- 展示多少条评论的 -->
        <div class="comment-number">
          {{commentNumber}}条评论
        </div>
<!-- 评论列表 -->
        <div class="comment-list" v-for="(item, i) in commentList">
<!--       评论头部，包括头像，昵称，vip，几楼，时间   -->
          <div class="comment-list-head">
            <div class="comment-list-head-left">
              <img class="userImg" @click="showUserMessage(item.username)" :src="item.picture" alt="">
              <div style="display: flex; flex-direction: column">
                <div>
                  <span class="name">{{item.name}}</span>
                  <span v-if="item.username == '1274765607'" class="author">作者</span>
                  <span v-else class="vip">vip</span>
                </div>
                <div>
                  <span class="lou">{{i + 1 }}楼</span>
                  <span class="time ">{{item.time | dateFormat}}</span>
                </div>
              </div>
            </div>
            <div>
            <div @click="showFatherCommentBox(i)" class="ddd">回复</div>
            </div>
          </div>
<!--       评论体，包括评论内容，回复按钮   -->
          <div class="comment-list-foot-box">
            <div class="comment-list-foot" v-html="item.comment">
            </div>
          </div>
<!--       父回复框   -->
          <div  class="father-reply-comment-box">
            <div @click="closeFatherCommentBox(i)" class="cancel">×</div>
            <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="textarea"
                maxlength="100"
                show-word-limit
                rows="3"
            >
            </el-input>
            <div class="showComment">
              <img  @click.stop="showemotion" src="../assets/images/emotion.png" alt="">
              <el-button size="mini" @click="addCommentChildren(item._id,item.name,item.username,i)" class="comment-btn" type="primary">发表</el-button>
            </div>
            <div @click.stop class="emotion" v-show="showEmotion" >
              <img  @click="changetext(index)" v-for="(item,index) in emotion" :key="index" :src="item" alt="">
            </div>
          </div>
<!--       子评论循环盒子   -->
      <div class="children-big-box" v-for="(item2, i2) in item.children" :key="i2">
        <!--    子评论列表      -->
        <div style="margin-left: 60px; " class="comment-list-head">
          <div class="comment-list-head-left">
            <img style="width: 35px; height: 35px" class="userImg" @click="showUserMessage(item2.username)" :src="item2.picture" alt="">
            <div style="display: flex; flex-direction: column">
              <div>
                <span class="name">{{item2.name}}</span>
                <span v-if="item2.username == '1274765607'" class="author">作者</span>
                <span v-else class="vip">vip</span>
              </div>
              <div style="margin-top: 5px">
                <span class="time ">{{item2.time | dateFormat}}</span>
              </div>
            </div>
          </div>
          <div class="ddd" @click="showChildrenCommentBox(i,i2)">回复</div>
        </div>
        <!--    子评论内容      -->
        <div style="margin: 10px 0 10px 100px;font-size: 16px" class="comment-list-foot" v-html="item2.comment">
        </div>
        <!--  子评论输入框，子表情，子按钮 -->
        <div class="reply-comment-box">
          <div @click="closeChildrenCommentBox" class="cancel">×</div>
          <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="100"
              show-word-limit
              rows="3"
          >
          </el-input>
          <div class="showComment">
            <img  @click.stop="showemotion" src="../assets/images/emotion.png" alt="">
            <el-button size="mini" @click="addCommentChildren(item._id,item2.name,item2.username,i)" class="comment-btn" type="primary">发表</el-button>
          </div>
          <div @click.stop class="emotion" v-show="showEmotion" >
            <img  @click="changetext(index)" v-for="(item,index) in emotion" :key="index" :src="item" alt="">
          </div>
        </div>
      </div>
        </div>

      </div>
      <div class="more">
        <el-button @click="loadcomment" class="more-btn" type="danger" round>{{tishi}}</el-button>
      </div>
    </el-card>

    <e-bottom></e-bottom>

<!--    查看个人信息对话框-->
    <el-dialog
        :title="name + '的个人信息'"
        :visible.sync="userMessageVisible"
        class="dialog"
        >
      <div class="dialogTop">
        <img class="dialogImg" :src="picture" alt="">
      </div>
      <div class="dialogMiddle">
        <span>昵称：</span>
        <span>{{name}}</span>
      </div>
      <div class="dialogBottom">
        <span>个人签名：</span>
        <span>{{idiograph}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="userMessageVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import bottom from "@/components/bottom";
export default {
  data () {
    return{
      commentBox: true,
      textarea: '',
      emotion: [],
      showEmotion: false,
      commentList: [],
      commentNumber: '',
      pageNumber: 5,
      tishi: '加载更多',
      arr: [],
      userMessageVisible: false,
      name: '',
      idiograph: '',
      picture: ''
    }
  },
  created() {
    for (var i = 1 ; i < 164 ; i++){
      const b = `https://cdn.jsdelivr.net/gh/Sanarous/files/emojis/aru/aru%20(${i}).png`
      this.emotion.push(b)
      this.arr.push(`<img src="https://cdn.jsdelivr.net/gh/Sanarous/files/emojis/aru/aru%20(${i}).png" alt="">`)
    }
    this.getCommentList()
    this.getCommentNumber()
  },
  methods: {
    async getCommentNumber () {
      const { data: res } = await this.$http.get('commentNumber')
      this.commentNumber = res.commentNumber
    },
    async getCommentList () {
      const { data: res } = await this.$http.get('getcomment',{
        params: {
          pageNumber: this.pageNumber
        }
      })
      console.log(res.commentList);
      res.commentList.forEach((item) => {
        item.comment = item.comment.replace(/\[em:(\d+)\]/g,(item,i) => {
          return this.arr[i-1]
        })
        item.children.forEach(item2 => {
          item2.comment = item2.comment.replace(/\[em:(\d+)\]/g,(item,i) => {
            return this.arr[i-1]
          })
        })
      })
      this.commentList = res.commentList
      // this.commentList.sort((a,b) => {
      //   return a - b
      // })
      this.tishi = res.tishi
    },
    hideemotion() {
      this.showEmotion = false
    },
    showemotion () {
      this.showEmotion = !this.showEmotion
    },
    changetext (index) {
      this.textarea = this.textarea + `[em:${index+1}]`
    },
    async addComment () {
      if (!window.sessionStorage.getItem('name')){
        return this.$message.error('请先登录再评论')
      }
      if (this.textarea.trim() == '') {
        return this.$Message.error('请输入内容')
      } else {
        const { data: res } = await this.$http.post('/comment', {
          name: window.sessionStorage.getItem('name'),
          picture: window.sessionStorage.getItem('picture'),
          comment: this.textarea.trim(),
          time: new Date(),
          username: window.sessionStorage.getItem('username'),
          children: []
        })
        var cc = {
          name: window.sessionStorage.getItem('name'),
          picture: window.sessionStorage.getItem('picture'),
          comment: this.textarea.trim(),
          time: new Date(),
          username: window.sessionStorage.getItem('username')
        }
        cc.comment = cc.comment.replace(/\[em:(\d+)\]/g,(item,i) => {
          return this.arr[i-1]
        })
        this.commentList.unshift(cc)
        this.textarea = ''
        this.commentNumber = this.commentNumber + 1
      }
    },
    async addCommentChildren (id,name,username,i) {
      if (!window.sessionStorage.getItem('name')){
        return this.$message.error({
          message: '请先登录再评论',
          center: true
        })
      }
      if (window.sessionStorage.getItem('username') == username){
        return this.$message.error({
          message: '不能回复自己哦',
          center: true
        })
      }
      if (this.textarea.trim() == '') {
        return this.$message.error({
          message: '请输入内容',
          center: true
        })
      } else {
        const { data: res } = await this.$http.post('commentChildren',{
          _id: id,
          children: {
            name: window.sessionStorage.getItem('name'),
            picture: window.sessionStorage.getItem('picture'),
            comment: `回复${name}：` + this.textarea.trim(),
            time: new Date(),
            username: window.sessionStorage.getItem('username'),
          }
        })
        let bb = {
          name: window.sessionStorage.getItem('name'),
          picture: window.sessionStorage.getItem('picture'),
          comment: `回复${name}：` + this.textarea.trim(),
          time: new Date(),
          username: window.sessionStorage.getItem('username')
        }
        bb.comment = bb.comment.replace(/\[em:(\d+)\]/g,(item,i) => {
          return this.arr[i-1]
        })
        this.commentList.some((item,i3) => {
          if (i3 == i) {
            item.children.push(bb)
            return true
          }
        })
        this.textarea = ''
      }
    },
    loadcomment () {
      if (this.tishi === '加载更多') {
        this.pageNumber = parseInt(this.pageNumber) + parseInt(10)
        this.getCommentList()
      } else {
        return
      }
    },
    async showUserMessage ( username ) {
      const { data: res } = await this.$http.get('getOneUserMessage', {
        params: {
          username: username
        }
      })
      this.name = res.name
      this.idiograph = res.idiograph
      this.picture = res.picture
      this.userMessageVisible = true
    },
    showFatherCommentBox (i) {
      this.textarea = ''
      let childrenReplyCommentBox = document.getElementsByClassName('reply-comment-box')
      for (let b = 0; b < childrenReplyCommentBox.length; b++){
        childrenReplyCommentBox[b].style.display = 'none'
      }
      let fatherReplyCommentBox = document.getElementsByClassName('father-reply-comment-box')
      for (let a = 0; a < fatherReplyCommentBox.length; a++){
        fatherReplyCommentBox[a].style.display = 'none'
      }
      fatherReplyCommentBox[i].style.display = 'block'
      this.commentBox = false
    },
    closeFatherCommentBox (i) {
      this.textarea = ''
      let fatherReplyCommentBox = document.getElementsByClassName('father-reply-comment-box')
      fatherReplyCommentBox[i].style.display = 'none'
      this.commentBox = true
    },
    showChildrenCommentBox (i,i2) {
      this.textarea = ''
      let previousReplyCount = 0
      for (let c = 0 ; c < i ; c++){
        previousReplyCount += this.commentList[c].children.length
      }
      let fatherReplyCommentBox = document.getElementsByClassName('father-reply-comment-box')
      for (let a = 0; a < fatherReplyCommentBox.length; a++){
        fatherReplyCommentBox[a].style.display = 'none'
      }
      let childrenReplyCommentBox = document.getElementsByClassName('reply-comment-box')
      for (let b = 0; b < childrenReplyCommentBox.length; b++){
        childrenReplyCommentBox[b].style.display = 'none'
      }
      childrenReplyCommentBox[i2+previousReplyCount].style.display = 'block'
      this.commentBox = false
    },
    closeChildrenCommentBox () {
      this.textarea = ''
      let fatherReplyCommentBox = document.getElementsByClassName('father-reply-comment-box')
      for (let a = 0; a < fatherReplyCommentBox.length; a++){
        fatherReplyCommentBox[a].style.display = 'none'
      }
      let childrenReplyCommentBox = document.getElementsByClassName('reply-comment-box')
      for (let b = 0; b < childrenReplyCommentBox.length; b++){
        childrenReplyCommentBox[b].style.display = 'none'
      }
      this.commentBox = true
    }
  },
  components:{
    eBottom: bottom
  },
}
</script>

<style lang="less" scoped>
.comment-container{
  .one-card{
    width: 55%;
    height: 410px;
    margin: 0 auto;
    margin-top: 25px;
    .header{
      text-align: center;
      font-size: 30px;
      i{
        margin-right: 20px;
      }
    }
    .middle{
      line-height: 50px;
      background-color: #E8F4FD;
      margin-top: 15px;
      color: #0000FF;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }
    .bottom{
      text-align: center;
      margin-top: 15px;
      img{
        width: 217px;
        height: 217px;
      }
    }
  }

  .two-card{
    width: 55%;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 5vh;
    .more{
      text-align: center;
      .more-btn{
        margin-top: 30px;
        width: 40%;
      }
    }
    .two-header{
      margin-bottom: 2vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      i{
        margin-right: 10px;
      }
      img{
        height: 50px;
      }
    }
    .comment-box{
      position: relative;

      .showComment{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 10px;
        margin-bottom: 5px;
        img{
          width: 30px;
          height: 30px;
        }
        .comment-btn{

        }
      }

      .emotion {
        width: 96%;
        //height: 180px;
        background-color: #fff;
        border: 1px solid #eee;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
        img{
          width: 20px;
          height: 23px;
          margin-right: 5px;
        }
      }
    }
    .comment-number{
      font-size: 20px;
      font-weight: bold;
    }
    .comment-list{
        margin-top: 30px;
      .reply-comment-box{
        position: relative;
        display: none;
        margin-left: 60px;
        .cancel{
          width: 16px;
          position: absolute;
          z-index: 5;
          top: 0;
          right: 1px;
          font-size: 16px;
          border: 1px solid #DDDFE4;
          text-align: center;
          border-radius: 5px;
          &:hover{
            cursor: pointer;
          }
        }
      }
      .father-reply-comment-box{
        position: relative;
        display: none;
        margin-left: 60px;
        .cancel{
          width: 16px;
          position: absolute;
          z-index: 5;
          top: 0;
          right: 1px;
          font-size: 16px;
          border: 1px solid #DDDFE4;
          text-align: center;
          border-radius: 5px;
          &:hover{
            cursor: pointer;
          }
        }
      }
      .comment-list-head{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .ddd{
          color: red;
          font-size: 12px;
          &:hover{
            cursor: pointer;
          }
        }
        .lou{
          font-size: 12px;
          color: #B3BFD7;
          margin-right: 30px;
        }
        .time{
          font-size: 12px;
          color: #B3BFD7;
        }
        .comment-list-head-left{
          display: flex;
          justify-content: flex-start;

          .author{
            background-color: red;
            width: 40px!important;
            height: 20px;
            text-align: center;
            color: white;
            border-radius: 2px;
            font-size: 14px;
          }
          .vip{
            background-color: #e6a23c;
            width: 40px!important;
            height: 20px;
            text-align: center;
            color: white;
            border-radius: 2px;
            font-size: 14px;
          }
          .userImg{
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
            margin-right: 10px;
            &:hover{
              transform: scale(1.3);
              transition: 0.5s ease;
              cursor: pointer;
            }
          }
          .name{
            margin-right: 12px;
            font-size: 16px;
          }


        }

      }
      .comment-list-foot-box{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .comment-list-foot{
          margin-left: 60px;
          margin-bottom: 15px;
          font-size: 16px;
        }
        .comment-list-foot-btn{
          color: red;
          font-size: 12px;
          &:hover{
            cursor: pointer;
          }
        }
      }
    }
  }

  .dialogTop{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto;
    .dialogImg{
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }
  }
  .dialogMiddle{
    margin: 7vh 0 3vh 5vw;
    color: deepskyblue;
    font-size: 17px;
    font-weight: bold;

  }
  .dialogBottom{
    margin: 1vh 0 7vw 5vw;
    color: deepskyblue;
    font-size: 17px;
    font-weight: bold;

  }
  .dialog{
    width: 150%;
    transform: translateX(-15%);
  }
  @media (min-width: 992px) and (max-width: 1300px) {
    .one-card{
      width: 90%;
      padding-bottom: 20px;
    }
    .two-card{
      width: 90%;
      .comment-list{
        .comment-list-head {
          .lou {
            font-size: 12px;
            margin-right: 20px;
          }

          .time {
            font-size: 12px;
          }
        }
      }
    }


  }
  @media (min-width: 768px) and (max-width: 991px) {
    .one-card{
      width: 90%;
      padding-bottom: 20px;
    }
    .two-card{
      width: 90%;
      .comment-list{
        .comment-list-head {
          .lou {
            font-size: 11px;
            margin-right: 20px;
          }

          .time {
            font-size: 11px;
          }
        }
      }
    }


  }
  @media (max-width: 767px) {
    .one-card{
      width: 90%;
      padding-bottom: 20px;
    }
    .two-card{
      width: 90%;
      .comment-list{
        .comment-list-head {
          .lou {
            font-size: 10px;
            margin-right: 10px;
          }

          .time {
            font-size: 11px;
          }
        }
      }
    }

  }
}
</style>
